/*tag input*/
.modal{ 
  overflow: auto !important; 
}
.bootstrap-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display: inline-block;
  padding: 4px 6px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
} 
.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0 6px;
  margin: 0;
  width: auto;
  max-width: inherit;
}
.bootstrap-tagsinput.form-control input::-moz-placeholder {
  color: #777;
  opacity: 1;
}
.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
  color: #777;
}
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
  color: #777;
}
.bootstrap-tagsinput input:focus {
  border: none;
  box-shadow: none;
}
.bootstrap-tagsinput .tag {
  margin-right: 2px;
  color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
  margin-left: 8px;
  cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
  content: "x";
  padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
/*end tag input*/
    body{
		  font-family: sans-serif !important;
	  }
	  .image-50{
        max-width: 50px;
         margin-right: 6px;
         background: #a2a2a7;
      }
	  .image-100{
        max-width: 100px;
         margin-right: 6px;
      }
      .image-250{
        max-width: 250px;
         margin-right: 6px;
      }
      .image-50 img{
        max-width: 50px;
       
      }
      .image-100 img{
        max-width: 100px;
       
      }
      .clear-fl{

      }
      .items-info{
            height: fit-content;
            font-size: small;
      }
      .shipping-price
      {
        font-size: small;
      }
      .font-small-d{
        font-size: small;
      }
      .items-info p{
      margin-bottom: 0px !important;
  }
    a {
        color: #696ffb;
      }
      .green{
        color: #696ffb;
      }
      .price{
        color: #4cceac;
      }
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.variants_option_set{
	font-weight: bold;
}
.variants_option{
	    color: #12bf77;
}
.container-items{
padding: 2px 0px 7px 10px;
}
#cc-product-style-selected img{
	    max-width: 180px;
}
.list-design-submitted img {
	margin: 10px;
}
.form-login{
	width: 50%;
    margin: auto;
    margin-top: 100px;
}
.logo{
	max-width:50px;
}
.fix-page-nav{
	position: fixed;
	right: 100px;
    margin-top: 10px;

}
h1, h2, h3{
  color: #7266ba;
}
.prc-mgl{
	    margin-left: 2em;
}
.position-fix{
	    position: fixed;
    top: 80px;
    width: 60%;
    background: #7266ba9e;
    border-radius: 10px;
}
.show{
  display: block;
}
.hide{
display: none;
}
.item-hide{
  display: none !important;
  -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 1s ease;
}
.item-show{
  display: inherit;
  -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 1s ease;
}
.badge-freedomdesign {
   color: #fff;
    background-color: #8e3fbf;
}
.product-design-status{
  font-size: large;
  color: #1abc9c;
}
.badge-lenful {
    color: #fff;
    background-color: #4f2a77;
}
.row-header th{
  border-bottom: 2px solid #f5f6f8;
}
.shipping-detail-line p {
      margin-bottom: 4px;
}
#mapping-product-view-modal .modal-dialog, #mapping-product-modal .modal-dialog {

  }
  .items-mapping-status{
    color: #0f9d58;
    text-align: center;
    margin-left: 3px;
    position: absolute;
  }
  .flower-12l-48x48 { animation: flower-12l-48x48 1s steps(12) infinite; display: block; width: 48px; height: 48px; background-image:url('/image/loading-white.png'); }
@keyframes flower-12l-48x48 { from { background-position: 0px 0px; } to { background-position: 0px -576px; } }
.design-upload {
  position: relative;
  max-width: 205px;
  margin: 12px;
}
.design-upload .avatar-edit {
  position: absolute;
  left: 93px;
  z-index: 1;
  top: 2px;
}
.design-upload .avatar-edit input {
  display: none;
}
.design-upload .avatar-edit input + label {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-bottom: 0;
  border-radius: 100%;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}
.design-upload .avatar-edit input + label:hover {
  background: #f1f1f1;
  border-color: #d6d6d6;
}
.design-upload .avatar-edit input + label:after {
  font-family: 'FontAwesome';
  color: #757575;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
}
.design-upload .design-preview {
  width: 120px;
  height: 120px;
  position: relative;
  border: 6px solid #F8F8F8;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  background-color: #9a9a9a;
}
.design-upload .design-preview > div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.label-light {
    font-weight: 100;
}
.badge-purple {
    color: #fff;
    background-color: #7266ba;
}
.dropzone-container { 
    border: 2px dashed #7266ba;
    color: #7266ba; 
  }
.dz-drag-hover { border: 5px solid #44d08f; color: #44d08f; }
.boder-bottom{
    border-bottom: 1px solid #eee;
    padding: 5px 0px 5px 0px;
}
.form-input-article{
  padding-top: 15px;
}

.preview-show {
  z-index: 2000;
  display: none;
  .img-show {
    width: 650px;
    height: 650px;
    background: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
    -webkit-box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
    box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
    img {
      width: 100%;
      height: 100%;
      position: fixed;//absolute
      top: 0;
      left: 0;
    }
  }
}
.preview-box{
    border: 2px solid #b9b9b9;
    padding: 4px;
    background: #f3f3f3;
    width: 463px;
    height: auto;
    overflow: hidden;
    position: fixed;
    z-index: 2000;
}
.dark-small-text{
  font-size: small;
  color: #b3b3b3;
}
/*fix the error when bootrap modal can't scroll*/


/*note orrder*/ 
.box-order-comment, .box-order-note{
  max-width: fit-content; 
      margin-top: 2em;
      margin: 5px;
    padding: 10px;    
    border: 1px solid #5b4e4eee;
    font-size: smaller;
}
.box-order-note{
  background: #ffe2bb;
}
.box-order-comment{
  background: #d7f0dd;
}
.box-comment-header, .box-note-header {
    font-weight: 700;
    border-bottom: 1px dashed #6b6666ee;
}
#sidebar-menu>ul>li>a svg {
  fill: #919eab;
  fill: var(--p-icon,#919eab);
  color: #fff;
  color: var(--p-override-transparent,#fff);
}
#sidebar-menu>ul>li>a.active svg {
  fill: #5c6ac4;
    fill: #3949b1;
}
.avatar-upload{
  display: inline-block;
}
.avatar-upload label{
  display: inline-block;
  width: 100px;
  height: 100px;
  font-size: 30px;
  border: 2px dashed #a8a3a3;
  text-align: center;
  line-height: 100px; /* Added to vertically center the text */
  cursor: pointer;
  background-color: #c3c8cc;
  color: #fff;
  border-radius: 5px;
}

.avatar-upload input{
  display: none;
}
.list-mockup, .list-design {
  float: left;
  padding-right: 10px;
}
.preview-image-sku{
    max-width: 100px;
    padding: 4px;
    background: #f4f4f4;
    border: 1px solid #eee;
    margin: 2px 2px 2px 0px;
} 
.badge-holding {
  color: #fff;
  background-color: #ff5fd5;
}
.table-social{
  table-layout: fixed; 
}
.table-social  .table th, .table td {
  white-space: normal; /* Cho phép xuống dòng */
  word-wrap: break-word; /* Ngắt từ khi xuống dòng */
}
.bd-group {
  padding: 1.5rem;
  border: 1px solid #9eb2b6;
  margin-right: 0;
  margin-left: 0;
  border-width: 2px;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
  margin: 8px 0px 8px 0px;
}
legend {
  display: block;
  font-size: medium;
  font-weight: 600;
  color: #426a77;
  width: auto;
  padding: 0;
  margin-bottom: .5rem;
  /* font-size: 1.5rem; */
  line-height: inherit;
  color: inherit;
  white-space: normal;
}